How I fixed a sticky element not working in my Next.js / Tailwind CSS app with a grid layout
I started with the following Tailwind CSS / React code and sticky positioning didn't work:
<div className="grid grid-cols-12 gap-4 min-h-screen mt-16 pt-3">
<main className="flex flex-col col-start-2 col-span-8">{children}</main>
<aside className="sticky mt-14 top-20">ASIDE CONTENT</aside>
</div>
After reading this article I realized I need to apply align-self: start; to my aside element so I added the self-start class to:
<div className="grid grid-cols-12 gap-4 min-h-screen mt-16 pt-3">
<main className="flex flex-col col-start-2 col-span-8">{children}</main>